<template>
    <div>
        <y-table ref="tableRef" v-bind="listOptions">

            <template #top>
                <vxe-notice-bar direction="right" content="自定义顶部区域"
                    style="background: green;color: #fff;"></vxe-notice-bar>
            </template>

            <template #left>
                <div style="background: orchid;width: 140px;height: 100%;">自定义表格左边区域</div>
            </template>

            <template #right>
                <div style="background: bisque;width: 140px;height: 100%;">自定义表格右边区域</div>
            </template>

            <template #bottom>
                <vxe-notice-bar direction="right" content="自定义底部区域" style="background: palegreen;"></vxe-notice-bar>
            </template>

            <template #asideLeft>
                <div style="background: darkcyan;width: 140px;height: 100%;color: #fff;">自定义左侧区域</div>
            </template>

            <template #asideRight>
                <div style="background: aqua;width: 140px;height: 100%;">自定义右侧区域</div>
            </template>
        </y-table>
    </div>
</template>

<script>
import { getTableData } from '@/api/table'

export default {
    data() {
        return {
            listOptions: {
                // 获取数据方法
                dataMethod: getTableData,
                formOptions: {
                    items: [
                        {
                            field: 'shen',
                            title: '省',
                            itemRender: {
                                name: 'ElSelect',
                                options: [
                                    { label: '四川省', value: '510000' },
                                    { label: '青海省', value: '630000' }
                                ],
                            }
                        },
                        {
                            field: 'shi',
                            title: '市',
                            itemRender: {
                                name: 'ElSelect',
                                options: [
                                    { label: '锦江区', value: '510104' },
                                    { label: '青羊区', value: '510105' },
                                    { label: '旌阳区', value: '510603' },
                                    { label: '中江县', value: '510623' },
                                    { label: '城东区', value: '630102' },
                                    { label: '城中区', value: '630103' },
                                    { label: '德令哈市', value: '632802' },
                                    { label: '格尔木市', value: '632801' },
                                ]
                            }
                        },
                        {
                            field: 'qu',
                            title: '区',
                            itemRender: {
                                name: 'ElSelect',
                                options: [
                                    { label: '锦江区', value: '510104' },
                                    { label: '青羊区', value: '510105' },
                                    { label: '旌阳区', value: '510603' },
                                    { label: '中江县', value: '510623' },
                                    { label: '城东区', value: '630102' },
                                    { label: '城中区', value: '630103' },
                                    { label: '德令哈市', value: '632802' },
                                    { label: '格尔木市', value: '632801' },
                                ]
                            }
                        }
                    ]
                },
                // 表格配置
                tableOptions: {
                    height: '',
                    toolbarConfig: {
                        buttons: [
                            { name: '新增', code: 'add', status: 'primary', icon: 'vxe-icon-add' },
                            { name: '批量删除', code: 'del', status: 'error', icon: 'vxe-icon-delete' },
                        ]
                    },
                    // 表格列
                    columns: [
                        { type: 'seq', width: 70 },
                        { field: 'kdmc', title: '考点名称' },
                        { field: 'xm', title: '姓名' },
                        { field: 'xb', title: '性别' },
                        { field: 'createTime', title: '时间' }
                    ],
                }
            }

        }
    },
    mounted() {
        this.$refs.tableRef.loadData()
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped></style>